<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="lib/jquery-3.4.1.js"></script>
    <script src="lib/http.js"></script>
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <div class="bg"><img src="images/tenor.gif" alt=""></div>
    <div class="main-box">
        <!-- <div class="movie-box">
            <img src="" alt="" class="movie-pic">
            <p class="title"></p>
        </div> -->
        <script>
            var movie = [];
            var url = "http://douban.uieee.com/v2/movie/top250";
            http({
                url,
                callback: handleData
            });

            function handleData(res) {
                console.log(res);
                var movies = res.subjects;
                for (var i = 0; i < 20; i++) {
                    var content = Object();
                    content.imgUrl = movies[i].images.small;
                    content.name = movies[i].title;
                    movie.push(content);
                }
                for (let j = 0; j < movie.length; j++) {
                    var item;
                    item = $(`
                    <div class="movie-box">
            <img src="${movie[j].imgUrl}" alt="" class="movie-pic">
            <p class="title">${movie[j].name}</p>
        </div>  `)
        $(".main-box").append(item);
                }
            }
        </script>
    </div>
</img>

</html>